<template>
  <div class="confirm-box" v-if="visible">
    <div class="mark" @click="modelCloseConfirm"></div>
    <div class="content-box">
      <div class="title" v-if="title">
        {{title}}
      </div>
      <div class="content">
        <slot name="content"></slot>
      </div>
      <div class="button-box">
        <div class="cnacal" v-if="gethiddenCancal" @click="closeConfirm">{{getcancalText}}</div>
        <div class="line" v-if="gethiddenCancal"></div>
        <div class="sure" @click="handleSubmit">{{getsubmitText}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["handleSubmit",'handleClose'])
const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  hiddenCancal:{
    type:Boolean,
    default:false
  },
  cancalText:{
    type:String
  },
  submitText:{
    type:String
  },
  isModelClose:{
    type:Boolean,
    default:true
  },
  title:{
    type:String
  }
})
const confirmId = ref('')

const gethiddenCancal = computed(()=>{
  return !props.hiddenCancal
})
const getsubmitText = computed(()=>{
  return props.submitText || $t('message.buttons.submit')
})
const getcancalText = computed(()=>{
  return props.cancalText || $t('message.buttons.cancal')
})

function handleSubmit(){
  emit('handleSubmit')
}
function modelCloseConfirm(){
  if(props.isModelClose){
    closeConfirm()
  }
}
function closeConfirm(){
  emit('handleClose')
}

</script>
<style lang="scss" scoped>
.confirm-box{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  .mark{
    background: rgba(54,59,76,0.5);
    height: 100%;
    width: 100%;
  }
  .content-box{
    border-radius: .75rem;
    background-color: #fff;
    min-height: 8.625rem;
    position: absolute;
    width: calc(100vw - 4.6875rem);
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    .title{
      color: #363B4C;
      font-size: 1rem;
      @include SourceHanSansCN-Bold;
      text-align: center;
      margin-top: 1.5rem;
      padding: 0 0.75rem 0.75rem;
    }
    .content{
      padding: .75rem;
      // min-height: 5.5rem;
      font-size: 1rem;
      color: #363b4c;
      display: flex;
      align-items: center;
      justify-content: center;
      @include SourceHanSansCN-Regular;
    }
    .button-box{
      display: flex;
      height: 3.4375rem;
      border-top: .0625rem solid #EEEFF0;
      .cnacal{
        width: 100%;
        text-align: center;
        line-height: 3.4375rem;
        color: #363B4C;
      }
      .line{
        width: .0625rem;
        background: #eeeff0;
      }
      .sure{
        width: 100%;
        text-align: center;
        line-height: 3.4375rem;
        color: #1E6FFF;
      }
    }
  }
}
</style>